<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放页</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/play.css">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="shortcut icon" href="#" />
</head>

<body>
    <div class="comments" style="display: none;">
        <div class="comments_container">
            <h5>X</h5>
            <h3>精彩评论</h3>
            <ul class="comments_list">
                <li>
                    <div class="com_header">
                        <div>
                            <p>评论人</p>
                            <p>9月10号</p>
                        </div>
                        <div>
                            <span class="fa fa-thumbs-o-up"></span>
                            <span>400</span>
                        </div>
                    </div>
                    <div class="com_content">
                        <p>
                            哈哈哈哈哈哈哈哈哈哈
                        </p>
                    </div>
                </li>
            </ul>
            <div class="send_comment">
                <input id="name" type="text" placeholder="评论人">
                <textarea name="" id="content" rows="5"></textarea>
                <button id="send_comments">提交评论</button>
            </div>
        </div>
    </div>
    <div class="container">
        <!-- 信息层 -->
        <!-- controls 决定该标签是否可见 -->
        <!-- 需要通过audio标签加载音频，但是通过自定义的标签控制音频 -->
        <audio id="myaudio"></audio>
        <div class="info">
            <!-- 唱碟 -->
            <div class="disk">
                <div class="album_img">
                    <!-- 这张图替换成数据的 -->
                    <img src="" alt="">
                </div>
            </div>
            <div class="lyric">
                <!-- 标题替换成数据的 -->
                <h3></h3>
                <!-- 歌词替换成数据的 -->
                <p></p>
            </div>
            <div class="slider">
                <!-- 通过value属性可以控制range的值 -->
                <!-- range是从0-100 -->
                <input type="range" value="0">
            </div>
            <button class="comments_button">显示评论</button>

        </div>
        <!-- 调节层 -->
        <div class="mask">

        </div>
        <!-- 背景层 -->
        <div class="bg">
            <!-- 这张图替换成数据的 -->
            <img src="" alt="">
        </div>
    </div>
</body>
<!-- 工具先引用 -->
<script src="../lib/flexible.js"></script>
<script src="../js/getEle.js"></script>
<script src="../node_modules/lyric-parser/dist/lyric.js"></script>
<script src="../lib/axios.js"></script>
<script src="../js/play.js"></script>
<script>
    const button = document.querySelector('.comments_button')
    const comment = document.querySelector('.comments')
    const h5 = document.querySelector('h5')
    button.onclick = function () {
        comment.style.display = "block";

    }
    h5.onclick = function () {
        comment.style.display = "none";
        // console.log('aaa');

    }
</script>
<script src="../js/post_comments.js"></script>

</html>